import { component$, useSignal, $ } from "@builder.io/qwik";
import Gauge from "../gauge";
import Button from "~/components/ui/Button";

export default component$(() => {
  const count = useSignal(70);

  const setCount = $((newValue: number) => {
    if (newValue < 0 || newValue > 100) {
      return;
    }
    count.value = newValue;
  });

  return (
    <div class="flex items-center justify-center gap-12">
      <Button onClick$={() => setCount(count.value - 1)}>-</Button>
      <Gauge value={count.value} />
      <Button onClick$={() => setCount(count.value + 1)}>+</Button>
    </div>
  );
});
